<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
      html {
        overflow: hidden;
      }

      .blog-common-title {
        background: url("/static/images/3.jpg") left no-repeat;
        background-size: cover;
        padding: 20px 0;

      }

      .layout-warp {
        display: flex;
      }

      .layout-left {
        width: 250px;
        height: 100vh;
        background: #323436;
      }

      .layout-right {
        flex: 2;
        height: 100vh;
      }

      ul {
        padding: 0;
      }

      .layout-menu li {
        margin-top: 5px;
        border-bottom: 1px solid #1c1c1c;
      }

      .alert {
        margin-bottom: 0;
      }

      .layout-menu li a {
        display: block;
        padding: 10px 0px 10px 25px;
        color: #fff;
        text-decoration: none;

      }

      .layout-menu li a i {
        margin-right: 15px;
      }

      .layout-left-header {
        padding-bottom: 20px;
      }

      .layout-search {
        padding: 15px;
        background: #DDF3F5;
      }

      .table > thead > tr > th {
        background: #03B8CF;
        color: #fff;
      }

      .router-link-active {
        background: #1c1c1c;
      }
      ul{
        padding: 0!important;
      }
    </style>
  </head>
  <body>
    <div class="layout-warp" id="app">
      <div class="layout-left">
        <div class="layout-left-header">
          <dl class="text-center">
            <dt>
              <router-link :to="{name:'user'}">
                <img src="/static/images/logo.png" width="50" height="50" class="img-circle" alt="圆形图片">
              </router-link>
            </dt>
            <dd>&nbsp;</dd>
            <dd class="text-danger"></dd>
            <dd class="text-danger"></dd>
          </dl>


          <div class="text-center">
            <a href="javascript:;" data-toggle="tooltip" data-tip-class="tooltip-success" title="gitHub"
               class="btn btn-sm btn-success">
              <i class="icon icon-github"></i>
            </a>
            <a href="javascript:;" data-toggle="tooltip" data-tip-class="tooltip-danger" title="新浪微博"
               class="btn btn-sm btn-danger">
              <i class="icon icon-weibo"></i>
            </a>

          </div>
        </div>

        <div class="alert alert-success-inverse"></div>

        <ul class="layout-menu">
          <li>
            <router-link :to="{name:'main'}"><i class="icon icon-user"></i>用户列表</router-link>
          </li>
          <li>
            <router-link :to="{name:'article'}"><i class="icon icon-user"></i>文章分类</router-link>
          </li>
          <!--<li><router-link :to="{name:'articleType'}"><i class="icon icon-user"></i>文章列表</router-link></li>-->
          <li><router-link :to="{name:'discuss'}"><i class="icon icon-user"></i>评论管理</router-link></li>
        </ul>


      </div>
      <div class="layout-right">
        <div class="blog-common-title">
          <div class="row">
            <div class="col-md-8 text-info">

            </div>
            <div class="col-md-4 text-right" style="padding-right: 20px;">
              <a href="javascript:;" class="btn btn-success"><i class="icon icon-cog"></i></a>
              <a href="javascript:;" class="btn  btn-primary"><i class="icon icon-signout"></i></a>

            </div>
          </div>
        </div>

        <router-view></router-view>


      </div>

    </div>
  </body>

</html>
